<template>
  <div class="page-style">
    <el-col :span="14">
      <el-form ref="productInfo" :model="form">
        <el-form-item label="广告图片" label-width="200">
          <el-upload
            class="avatar-uploader"
            :action="uploadUrl + '/oss_upload'"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="form.advertisement_img" :src="form.advertisement_img" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
          <span class="beizhu">建议尺寸：540 * 960</span>
        </el-form-item>
        <el-form-item label="广告图片" label-width="200">
          <el-input v-model="form.advertisement_href" />
        </el-form-item>
        <el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submit">提交</el-button>
          </el-form-item>
        </el-form-item></el-form>
    </el-col>

  </div>
</template>

<script>
import { brandOperationAdApi, getBrandAdApi } from '@/api/brand'
import { deletePicture } from '@/api/main'
export default {
  data() {
    return {
      uploadUrl: process.env.VUE_APP_BASE_API,
      form: {
        id: this.$store.state.user.brand_id,
        advertisement_img: '',
        advertisement_href: ''
      },
      dialogVisible: false,
      dialogImageUrl: '',
      removeImg: ''
    }
  },
  created() {
    console.log(this.$store.state.user.brand_id)
    this.getbrandAdFun()
  },
  methods: {
    handleAvatarSuccess(res, file) {
      if (this.form.advertisement_img) {
        const img = this.form.advertisement_img.split('/')
        const delImg = img[img.length - 1]
        console.log(delImg)

        // 删除上一个图片
        const data = {
          object: delImg
        }
        deletePicture(data).then(res => {
          if (res.code === 200) {
            console.log('图片删除！')
          }
        })
      }
      this.form.advertisement_img = res
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type.split('/')[0] === 'image'

      if (!isJPG) {
        this.$message.error('上传只能为图片格式!')
      }
      return isJPG
    },
    getbrandAdFun() {
      const data = {
        id: this.$store.state.user.brand_id
      }
      getBrandAdApi(data).then(res => {
        console.log(res)
        this.form.advertisement_img = res.advertisement_img
        this.form.advertisement_href = res.advertisement_href
      })
    },
    brandOperationAdFun() {
      console.log(this.form)
      const data = this.form
      // console.log(data)
      brandOperationAdApi(data).then(res => {
        console.log(res)
        if (res.code === 200) {
          this.$message.success('信息提交成功！')
        }
      })
    },
    submit() {
      this.brandOperationAdFun()
    }
  }
}
</script>

<style scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 150px;
    height: 150px;
    line-height: 150px;
    text-align: center;
    border: 1px dotted #d9d9d9;
    border-radius: 6px;
  }
  .avatar {
    width: 150px;
    height: 150px;
    display: block;
  }

</style>
